<template>
  <el-popover
    class="box-item"
    width="350"
    trigger="hover"
    :placement="descriptionPlacement"
  >
    <el-descriptions title="接收报文" size="mini" border :column="2">
      <el-descriptions-item v-for="item in recvList" :key="item.key">
        <span slot="label">{{ item.key }}</span>
        <span>{{ item.value }}</span>
      </el-descriptions-item>
    </el-descriptions>
    <br />
    <el-descriptions title="发送报文" size="mini" border :column="2">
      <el-descriptions-item v-for="item in sendList" :key="item.key">
        <span slot="label">{{ item.key }}</span>
        <span>{{ item.value }}</span>
      </el-descriptions-item>
    </el-descriptions>
    <div id="out" slot="reference">
      <div id="title">{{ title }}</div>
      <div id="content">
        <slot name="content"></slot>
        <div class="bottom">
          <el-link :href="link" type="primary" target="_blank">更多 >></el-link>
        </div>
      </div>
    </div>
  </el-popover>
</template>

<script>
export default {
  name: "Layer",
  props: {
    title: {
      type: String,
      default: "Layer title",
    },
    // 接受 json
    recv: {
      type: String,
      default: '{"text": ""}',
    },
    send: {
      type: String,
      default: '{"text": ""}',
    },
    descriptionPlacement: {
      type: String,
      default: "right",
    },
    // 跳转链接
    link: {
      type: String,
      default: "",
    },
  },
  computed: {
    recvList() {
      return this.parseJson(this.recv);
    },
    sendList() {
      return this.parseJson(this.send);
    },
  },
  methods: {
    parseJson(str = "{}") {
      try {
        const data = JSON.parse(str || "{}");
        return Object.keys(data).map((k) => {
          return {
            key: k,
            value: data[k],
          };
        });
      } catch (e) {
        console.log("解析 JSON 失败：", e);
        return [];
      }
    },
  },
};
</script>

<style scoped lang="less">
#out {
  box-sizing: border-box;
  width: 300px;
  height: 170px;
  background: #555555;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
  padding: 10px;

  #title {
    color: white;
    width: 100%;
    height: 30px;
    font-size: 24px;
    margin-bottom: 8px;
  }

  #content {
    position: relative;
    width: 100%;
    height: 120px;
    color: white;

    .bottom {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}

.no-wrap {
  white-space: nowrap;
}
</style>
